<template>
  <div class="app-container details purchaseOrder-details">
    <el-row :gutter="20" v-loading="loading">
      <!--产品分类-->
      <el-col :span="5" class="details-left box-card">
        <el-card>
          <!-- 系统介绍 -->
          <div class="details-left-top details-left-box">
            <!-- 项目才显示图标 -->
            <!-- <i class="el-icon-s-tools"></i> -->
            <div class="top">
              <svg-icon
                :icon-class="'svg_purchaseorder'"
                class="block w-80px h-80px m-auto mb-15px"
              />
              <label>{{ formData.title }}</label>
              <p>{{ formData.number }}</p>
            </div>
            <el-row :gutter="24" class="mt-10px">
              <el-col
                :span="12"
                class="border-r-2 border-fuchsia-600 border-gray-100 border-r-solid"
              >
                <p class="text-gray-700 font-bold text-base">1/10</p>
                <p class="text-sm mt-10px">工单</p>
              </el-col>
              <el-col :span="12">
                <p class="text-gray-700 font-bold text-base">1/10</p>
                <p class="text-sm mt-10px">任务</p>
              </el-col>
            </el-row>
          </div>
          <div class="details-left-box">
            <!-- <div class="title">项目资产概况</div> -->
            <div class="cnt">
              <el-row :gutter="24" class="btn-box">
                <!-- <el-col :span="12">
                  <el-button
                    class="w-full"
                    type="primary"
                    @click="handleFollowUp"
                    >写新跟进</el-button
                  >
                </el-col> -->
                <el-col :span="12">
                  <el-button
                    class="w-full"
                    type="primary"
                    plain
                    @click="handleCollaborate"
                    >添加协作</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button
                    class="w-full"
                    type="primary"
                    plain
                    @click="handleUpload"
                    >添加附件</el-button
                  >
                </el-col>
                <el-col :span="12">
                  <el-button
                    class="w-full"
                    type="primary"
                    plain
                    @click="addTask"
                    >添加任务</el-button
                  >
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="details-left-box">
            <el-descriptions
              title="订单信息"
              :column="1"
              border
              :size="'small'"
            >
              <template #title>
                <div class="text-5">订单信息</div>
              </template>
              <!-- <el-descriptions-item
                label="供应商名称"
                label-class-name="w-3/6"
                >{{ formData.customerName }}</el-descriptions-item
              > -->
              <el-descriptions-item label="订单金额(元)">{{
                formData.price
              }}</el-descriptions-item>
              <el-descriptions-item label="已付款金额(元)">{{
                formData.repaymentPrice
              }}</el-descriptions-item>
              <el-descriptions-item label="业务板块">
                <dict-drop
                  :options="order_business_type"
                  :value="formData.businessType"
                ></dict-drop>
              </el-descriptions-item>
            </el-descriptions>
          </div>
          <div class="details-left-box">
            <div class="title">所属信息</div>
            <ul class="cnt status-box">
              <li>
                <el-icon><Notebook /></el-icon>
                <label>所属公司</label>
                <p>{{ formData.deptName }}</p>
              </li>
              <li>
                <el-icon><Notebook /></el-icon>
                <label>业务部门</label>
                <p>{{ formData.transactionDeptName }}</p>
              </li>
              <li>
                <el-icon><Notebook /></el-icon>
                <label>业务员</label>
                <p>{{ formData.transactionName }}</p>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19" class="box-card" style="min-height: 800px">
        <el-card class="details-right" style="min-height: 100%">
          <el-tabs v-model="activeName" class="details-right-tabs">
            <el-tab-pane
              v-for="(item, index) in tabsList"
              :key="index"
              :label="item.label"
              :name="item.name"
            >
            </el-tab-pane>
            <div>
              <component
                ref="tabName"
                :is="components[activeName]"
                v-bind="componentData"
              />
              <!--
                :orderData="formData"
                :orderId="formData.id" -->
            </div>
          </el-tabs>
        </el-card>
      </el-col></el-row
    >

    <!-- 状态更新对话框 -->
    <el-dialog
      :title="statusBox.title"
      v-model="statusBox.open"
      :width="statusBox.width"
      append-to-body
      @close="cancel"
    >
      <el-form
        ref="statusRef"
        :model="statusForm"
        :rules="statusRules"
        label-width="140px"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="产品名称" prop="name">
              <el-input
                v-model="statusForm.name"
                disabled
                placeholder="请输入产品名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="产品状态" prop="label">
              <el-select
                class="w-full"
                v-model="statusForm.status"
                placeholder="请选择产品状态"
              >
                <el-option
                  v-for="item in enable_status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="更新说明" prop="description">
              <el-input
                v-model="statusForm.description"
                type="textarea"
                rows="4"
                maxlength="100"
                show-word-limit
                placeholder="请输入更新说明"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 跟进弹窗 -->
    <FollowUp
      :dialogParam="followUpParam"
      @close="
        () => {
          followUpParam.isVisible = false
          closeUp()
        }
      "
    ></FollowUp>

    <!-- 添加附件弹窗 -->
    <Appendix
      :dialogParam="appendixParam"
      @close="
        () => {
          appendixParam.isVisible = false
          closeUp()
        }
      "
    ></Appendix>

    <!-- 新建任务 -->
    <TaskFrom :dialogParam="taskParam" @closeDialog="closeTask"></TaskFrom>
  </div>
</template>
<script setup name="PurchaseOrderDetails">
import { reactive, toRefs, ref, createApp, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getPurchaseOrderDetail } from '@/api/indentManage/indent'
import {
  order_business_type //订单业务分类
} from '@/hooks/dict/order'
import useTagsViewStore from '@/store/modules/tagsView'
import ApprovalRecord from './approvalRecord'
import Overview from './overview'
import OrderProduct from './orderProduct'
import RepaymentInfo from './repaymentInfo'
import InvoiceRecord from '@/businessComponents/InvoiceRecord'
import FollowUpList from '@/businessComponents/FollowUpList'
import FollowUp from '@/businessComponents/FollowUp'
import AppendixList from '@/businessComponents/AppendixList'
import Appendix from '@/businessComponents/Appendix'
import OperationLog from '@/businessComponents/OperationLog'
import TaskFrom from '@/views/rsgl/taskManage/modules/add.vue' /* 添加任务弹窗 */
import taskDetailsForm from '@/views/salesManage/businessManage/businessDetails/modules/taskDetails.vue' /* 任务列表 */
const router = useRouter()
const route = useRoute()
const { proxy, type } = getCurrentInstance()
const activeName = ref('Overview')
const formData = ref({})
const components = shallowRef({
  ApprovalRecord,
  Overview,
  OrderProduct,
  RepaymentInfo,
  InvoiceRecord,
  FollowUpList,
  AppendixList,
  taskDetailsForm,
  OperationLog
})

const data = reactive({
  loading: false,
  tabsList: [
    {
      label: '审批记录',
      name: 'ApprovalRecord',
      data: {
        baseDetail: computed(() => {
          return formData.value
        })
      }
    },
    {
      label: '概况信息',
      name: 'Overview',
      data: {
        orderData: computed(() => {
          return formData.value
        })
      }
    },
    {
      label: '产品记录',
      name: 'OrderProduct',
      data: {
        orderId: computed(() => {
          return formData.value.id
        }),
        status: computed(() => {
          return formData.value.status
        }),
        approvalStatus: computed(() => {
          return formData.value.approvalStatus
        })
      }
    },
    {
      label: '付款情况',
      name: 'RepaymentInfo',
      data: {
        orderId: computed(() => {
          return formData.value.id
        })
      }
    },
    {
      label: '发票记录',
      name: 'InvoiceRecord',
      data: {
        tableParam: computed(() => {
          return {
            id: formData.value.id,
            type: 'order',
            orderType: formData.value.orderType
          }
        })
      }
    },
    // {
    //   label: '跟进记录',
    //   name: 'FollowUpList',
    //   data: {
    //     tableParam: computed(() => {
    //       return {
    //         businessId: formData.value.id, //业务id
    //         busineName: formData.value.title, //业务名称
    //         tableName: 'ord_purchase_order' //业务类型  biz_customer  客户页面  ord_project  项目  ord_order订单
    //       }
    //     })
    //   }
    // },
    {
      label: '相关附件',
      name: 'AppendixList',
      data: {
        tableParam: computed(() => {
          return {
            businessId: formData.value.id, //业务id
            busineName: formData.value.title, //业务名称
            tableName: 'ord_purchase_order' //业务类型  biz_customer  客户页面  ord_project  项目  ord_order订单
          }
        })
      }
    },
    {
      label: '任务详情',
      name: 'taskDetailsForm',
      data: {
        taskParam: computed(() => {
          return {
            businessType: '6',
            businessId: formData.value.id, //业务 id
            businessName: formData.value.title //标题
          }
        })
      }
    },
    {
      label: '操作日志',
      name: 'OperationLog',
      data: {
        tableParam: computed(() => {
          return {
            businessId: formData.value.id, //业务id
            busineName: formData.value.title, //业务名称
            tableName: 'ord_purchase_order' //业务类型  biz_customer  客户页面  ord_project  项目  ord_order订单
          }
        })
      }
    }
  ],
  componentData: [],

  statusBox: {
    title: '状态更新',
    open: false,
    width: '800px'
  },

  statusForm: {},
  statusRules: {},
  followUpParam: {}, // 跟进弹窗配置
  appendixParam: {} // 附件弹窗配置
})
let {
  loading,
  tabsList,
  componentData,
  statusBox,
  statusForm,
  statusRules,
  followUpParam,
  appendixParam
} = toRefs(data)

watchEffect(() => {
  if (route.query.purchaseOrderId) {
    console.log('这是详情！')
    getFormData(route.query.purchaseOrderId)
    // statusForm.value.name = formData.value.name
  }
  if (route.query.tabPane) {
    activeName.value = route.query.tabPane
    // statusForm.value.name = formData.value.name
  }
})
// watch(
//   () => [formData], //[passData.data, data.crudData],
//   (newVal, oldValue) => {
//     statusForm.value.name = formData.value.name
//   },
//   { deep: true }
// )
onMounted(() => {
  componentData.value = computed(() => {
    let val = tabsList.value.filter(e => {
      return e.name == activeName.value
    })
    console.log('val[0].data==>', val[0].data)
    return val[0].data
  })
})

const taskParam = ref({})

// 新建任务
const addTask = () => {
  // taskParam.value.isVisible = true
  // taskParam.value.businessType = '2'
  // taskParam.value.businessId = formData.value.id
  // taskParam.value.businessName = formData.value.title
  let object = {
    businessType: '6',
    businessId: formData.value.id,
    businessName: formData.value.title
  }
  router.push({
    path: '/rsgl/other/addTasking',
    query: { taskParam: JSON.stringify(object) }
  })
}

// 任务关闭
const closeTask = () => {
  taskParam.value.isVisible = false
  closeUp()
}

/** 获取产品详情
 * @param {number}  id 表单id
 */

function getFormData(id) {
  loading.value = true
  getPurchaseOrderDetail(id).then(res => {
    formData.value = res.data
    loading.value = false
    console.log('formData.value', formData.value)
  })
}

function goTo(url, data) {
  router.push({ path: url, query: data })
}
// 初始化
function init() {
  //   getFormData(route.query.productId)
  //   statusForm.value.name = formData.value.name
}
function cancel() {
  statusBox.value.open = false
  reset()
}
function submitForm() {
  console.log('statusForm.value', statusForm.value)
  // changeProductStatus(statusForm.value).then(res => {
  //   statusBox.value.open = false
  //   proxy.$modal.msgSuccess('修改成功')
  //   reset()
  // })
}

/** 表单重置 */
function reset() {
  statusForm.value = {}
  proxy.resetForm('statusRef')
}

// 跟进附件弹出关闭刷新列表
function closeUp() {
  let id = formData.value.id
  formData.value.id = ''
  formData.value.id = id
  // console.log('toRaw-tabsList==>', toRaw(tabsList.value))
  // console.log('tabsList==>', tabsList.value)
}

// 跟进
function handleFollowUp() {
  /***订单模块 */
  console.log('row==>', formData)
  followUpParam.value.isVisible = true
  followUpParam.value.tableName = 'ord_purchase_order'
  followUpParam.value.businessId = formData.value.id
  followUpParam.value.customer = formData.value.customerName
  followUpParam.value.orderName = formData.value.title
}
// 协作
function handleCollaborate() {}
// 附件
function handleUpload() {
  console.log('appendixParam==>', appendixParam)
  appendixParam.value.isVisible = true
  appendixParam.value.tableName = 'ord_purchase_order'
  appendixParam.value.businessId = formData.value.id
}

init()
</script>
<style scoped lang="scss">
@import '@/assets/styles/detailsStyle.scss';
</style>
